<template>
  <div class="nav_outer">
    <Header>我的收藏</Header>
    <div class="content">
      <!-- <div class="collectabs">
        <div v-bind:class="{ tab:true,on:statu==1 }">
          <span>职位收藏</span>
        </div>
        <div v-bind:class="{ tab:true,on:statu==2 }" @click="statu=2">
           <span>任务收藏</span>
        </div>
      </div> -->
      <div class="jobs">
        <div class="job" v-for="item in collets" v-bind:key="item.id" :data-id="item.id">
          <p class="job_title">{{item.title}}</p>
          <p class="job_tag">
            <span v-for="jtag in (item.positionTags ? item.positionTags.split(',') : [])" v-bind:key="jtag">{{jtag}}</span>
          </p>
          <div class="flex_bet">
            <span class="job_price">{{item.salaryTips}}元/月</span>
            <span class="common_statu" v-if="item.marketingType==0">入职奖</span>
          </div>
          <div class="jobtags flex_bet">
            <div class="jobtags_tags">
              <span v-for="tag in (item.welfareTags ? item.welfareTags.split(',') : [])" v-bind:key="tag">{{tag}}</span>
            </div>
            <span>{{item.city}}·{{ (item.updateDate || item.createDate) | today}}</span>
          </div>
        </div>
      </div>
      <!-- <div class="collects" v-show="statu==2">
      </div>-->
    </div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      statu: 1,
      pullre: null,
      pageNum: 1,
      pageSize: 10,
      totalPage: 1,
      loading: false,
      collets: [],
      defaultplace: require('../assets/img/jobplace.jpeg')
    };
  },
  created() {
    this.loadCollects();
  },
  mounted() {
    let mui = this.mui,
      that = this;
    mui(".jobs").on("tap", ".job", function() {
      var id = this.getAttribute("data-id");
     that.$router.replace({ path: "/gangwei/" + id });
    });
  },
  methods: {
    loadCollects() {
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http2.get("/mobile/usercollection/page", {
        current: that.pageNum,
        size: that.pageSize,
        type: 0,
        userId: localStorage.getItem("uid")
      }).then(
        res => {
          if (that.pageNum == 1) {
            that.collets = res.object;
          } else {
            that.collets = that.collets.concat(res.object);
          }
           that.totalPage = res.totalPage || 1;
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    }
  },
  components: {
    Header
  }
};
</script>

<style scoped lang='scss'>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
body {
  background: #f5f5f5 !important;
}
.content {
  color: #666;

  .collectabs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
    .tab {
      flex: 1;
      text-align: center;
      height: px2em(70);
      line-height: px2em(70);
      font-size: 0.95em;
      background: #fff;
      color: #333;
      > span {
        display: inline-block;
        height: 100%;
      }
      &.on > span {
        border-top: 3px solid #4689e9;
        position: relative;
        top: -3px;
      }
    }
  }
  .jobs {
    .job {
      padding: px2em(30);
      margin: px2em(12) 0;
      padding-bottom: px2em(20);
      background: #fff;
      > p {
        margin-bottom: 5px;
      }
    }
    .jobs_title {
      padding-left: 0.5em;
      border-left: 6px solid #507df4;
    }
    .jobs_recomend {
      padding: px2em(20);
      position: relative;
      > hr {
        margin: 0;
      }
      > span {
        position: absolute;
        display: inline-block;
        width: px2em(196);
        line-height: px2em(40);
        text-align: center;
        background: #fff;
        left: 50%;
        margin-left: -px2em(98);
        top: 0;
      }
    }
    .job_title {
      font-size: 1.2em;
      color: #333;
    }
    .job_price {
      font-size: 1.2em;
      color: red;
    }
    .jobtags {
      margin-top: px2em(30);
      font-size: 0.7em;
      > span {
        color: #aeafaf;
      }
    }
    .jobtags_tags > span {
      height: px2em(40);
      border-radius: px2em(23);
      line-height: px2em(40);
      color: #00b9ff;
      border: 1px solid #00b9ff;
      padding: 3px 5px;
      margin-right: 6px;
    }
  }
}
</style>